<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统设置</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        body {
            background-color: #f5f5f5;
            padding: 20px;
        }
        
        .layui-card {
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            border-radius: 4px;
        }
        
        .setting-item {
            padding: 15px 0;
            border-bottom: 1px solid #f6f6f6;
        }
        
        .setting-item:last-child {
            border-bottom: none;
        }
        
        .setting-label {
            float: left;
            width: 120px;
            font-weight: bold;
        }
        
        .setting-content {
            margin-left: 130px;
        }
    </style>
</head>
<body>
    <div class="layui-container">
        <div class="layui-card">
            <div class="layui-card-header">系统设置</div>
            <div class="layui-card-body">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">基本设置</li>
                        <li>用户管理</li>
                        <li>日志管理</li>
                    </ul>
                    <div class="layui-tab-content">
                        <!-- 基本设置 -->
                        <div class="layui-tab-item layui-show">
                            <form class="layui-form" action="">
                                <div class="setting-item">
                                    <label class="layui-form-label">系统名称</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="system_name" value="路口信控数智融合AI决策系统" class="layui-input">
                                    </div>
                                </div>
                                <div class="setting-item">
                                    <label class="layui-form-label">系统版本</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="version" value="V1.0" class="layui-input" readonly>
                                    </div>
                                </div>
                                <div class="setting-item">
                                    <label class="layui-form-label">默认主题</label>
                                    <div class="layui-input-block">
                                        <select name="theme" lay-verify="">
                                            <option value="0">默认蓝色主题</option>
                                            <option value="1">绿色主题</option>
                                            <option value="2">橙色主题</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="setting-item">
                                    <label class="layui-form-label">数据保存</label>
                                    <div class="layui-input-block">
                                        <input type="checkbox" name="auto_save" title="自动保存数据" lay-skin="primary" checked>
                                    </div>
                                </div>
                                <div class="setting-item">
                                    <label class="layui-form-label">通知设置</label>
                                    <div class="layui-input-block">
                                        <input type="checkbox" name="email_notify" title="邮件通知" lay-skin="primary">
                                        <input type="checkbox" name="sms_notify" title="短信通知" lay-skin="primary">
                                    </div>
                                </div>
                                <div class="setting-item">
                                    <label class="layui-form-label"></label>
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="saveSetting">保存设置</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        
                        <!-- 用户管理 -->
                        <div class="layui-tab-item">
                            <table class="layui-table">
                                <colgroup>
                                    <col width="150">
                                    <col width="200">
                                    <col>
                                    <col width="200">
                                    <col width="150">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>用户ID</th>
                                        <th>用户名</th>
                                        <th>角色</th>
                                        <th>创建时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>admin</td>
                                        <td>系统管理员</td>
                                        <td>2025-09-01 10:00</td>
                                        <td>
                                            <button class="layui-btn layui-btn-xs edit-user-btn" data-userid="1" data-username="admin" data-role="系统管理员">编辑</button>
                                            <button class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            
                            <button class="layui-btn" id="add-user-btn">添加用户</button>
                            
                            <!-- 用户编辑弹窗 -->
                            <div id="user-edit-modal" style="display: none; padding: 20px;">
                                <form class="layui-form" lay-filter="user-form">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">用户名</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">密码</label>
                                        <div class="layui-input-block">
                                            <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">确认密码</label>
                                        <div class="layui-input-block">
                                            <input type="password" name="confirm_password" placeholder="请确认密码" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">角色</label>
                                        <div class="layui-input-block">
                                            <select name="role" lay-verify="required">
                                                <option value="">请选择角色</option>
                                                <option value="系统管理员">系统管理员</option>
                                                <option value="普通用户">普通用户</option>
                                                <option value="只读用户">只读用户</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">邮箱</label>
                                        <div class="layui-input-block">
                                            <input type="email" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">手机号</label>
                                        <div class="layui-input-block">
                                            <input type="tel" name="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="user-submit">保存</button>
                                            <button type="button" class="layui-btn layui-btn-primary" id="user-cancel-btn">取消</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        
                        <!-- 日志管理 -->
                        <div class="layui-tab-item">
                            <form class="layui-form layui-form-pane">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">日志级别</label>
                                        <div class="layui-input-inline">
                                            <select name="log_level">
                                                <option value="0">全部</option>
                                                <option value="1">信息</option>
                                                <option value="2">警告</option>
                                                <option value="3">错误</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">时间范围</label>
                                        <div class="layui-input-inline" style="width: 100px;">
                                            <input type="text" name="log_start_time" placeholder="开始时间" autocomplete="off" class="layui-input" id="log_start_time">
                                        </div>
                                        <div class="layui-form-mid">-</div>
                                        <div class="layui-input-inline" style="width: 100px;">
                                            <input type="text" name="log_end_time" placeholder="结束时间" autocomplete="off" class="layui-input" id="log_end_time">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <button class="layui-btn layui-btn-primary" lay-submit lay-filter="searchLog">
                                            <i class="layui-icon layui-icon-search"></i> 查询
                                        </button>
                                    </div>
                                </div>
                            </form>
                            
                            <table class="layui-table">
                                <colgroup>
                                    <col width="200">
                                    <col width="150">
                                    <col>
                                    <col width="200">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>时间</th>
                                        <th>级别</th>
                                        <th>内容</th>
                                        <th>操作用户</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>2025-09-22 14:30:25</td>
                                        <td>信息</td>
                                        <td>用户admin登录系统</td>
                                        <td>admin</td>
                                    </tr>
                                    <tr>
                                        <td>2025-09-22 14:32:10</td>
                                        <td>信息</td>
                                        <td>用户admin新增路口数据：解放路与中山路交叉口</td>
                                        <td>admin</td>
                                    </tr>
                                    <tr>
                                        <td>2025-09-22 14:35:42</td>
                                        <td>信息</td>
                                        <td>用户admin启动AI分析：人民路与建设路交叉口</td>
                                        <td>admin</td>
                                    </tr>
                                </tbody>
                            </table>
                            
                            <div id="logPage"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="./layui/layui.js"></script>
    <script>
        layui.use(['element', 'form', 'laydate', 'laypage', 'layer'], function(){
            var element = layui.element;
            var form = layui.form;
            var laydate = layui.laydate;
            var laypage = layui.laypage;
            var layer = layui.layer;
            var $ = layui.$;
            
            // 日期选择器
            laydate.render({
                elem: '#log_start_time'
            });
            
            laydate.render({
                elem: '#log_end_time'
            });
            
            // 分页
            laypage.render({
                elem: 'logPage',
                count: 50,
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                jump: function(obj){
                    console.log(obj);
                }
            });
            
            // 保存设置
            form.on('submit(saveSetting)', function(data){
                layer.msg('设置保存成功');
                return false;
            });
            
            // 查询日志
            form.on('submit(searchLog)', function(data){
                layer.msg('查询功能已触发');
                return false;
            });
            
            // 用户编辑弹窗功能
            var currentModal = null;
            var isEditMode = false;
            
            // 添加用户按钮点击事件
            document.getElementById('add-user-btn').addEventListener('click', function() {
                openUserModal('add');
            });
            
            // 编辑用户按钮点击事件
            document.addEventListener('click', function(e) {
                if (e.target.classList.contains('edit-user-btn')) {
                    var userId = e.target.getAttribute('data-userid');
                    var username = e.target.getAttribute('data-username');
                    var role = e.target.getAttribute('data-role');
                    openUserModal('edit', {userId: userId, username: username, role: role});
                }
            });
            
            // 取消按钮点击事件
            document.getElementById('user-cancel-btn').addEventListener('click', function() {
                if (currentModal) {
                    layer.close(currentModal);
                }
            });
            
            // 打开用户编辑弹窗
            function openUserModal(mode, userData) {
                isEditMode = mode === 'edit';
                var title = isEditMode ? '编辑用户' : '添加';
                
                // 重置表单
                form.val('user-form', {
                    username: '',
                    password: '',
                    confirm_password: '',
                    role: '',
                    email: '',
                    phone: ''
                });
                
                // 如果是编辑模式，填充数据
                if (isEditMode && userData) {
                    form.val('user-form', {
                        username: userData.username,
                        role: userData.role
                    });
                }
                
                // 打开弹窗
                currentModal = layer.open({
                    type: 1,
                    title: title,
                    area: ['500px', 'auto'],
                    content: $('#user-edit-modal'),
                    btn: [],
                    success: function(layero, index) {
                        // 重新渲染表单
                        form.render();
                    }
                });
            }
            
            // 表单提交事件
            form.on('submit(user-submit)', function(data){
                // 模拟提交成功
                setTimeout(function() {
                    if (currentModal) {
                        layer.close(currentModal);
                    }
                    var msg = isEditMode ? '用户信息更新成功' : '用户添加成功';
                    layer.msg(msg, {icon: 1});
                }, 500);
                
                return false; // 阻止表单跳转
            });
        });
    </script>
</body>
</html>